8e:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0yv65k-y95kni.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0yv65k-y95kni.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD"],"SWRDataProvider"] 90:T2d49,[V0_FILE]typescriptreact:file="components/ProductCard.tsx" isEdit="true" isMerged="true" "use client" import Image from "next/image" import { useState } from "react" import { Heart, ShoppingCart, Expand } from "lucide-react" interface ProductCardProps { name: string price: number image: string colors: string[] sizes: string[] } export default function ProductCard({ name, price, image, colors, sizes }: ProductCardProps) { const [isHovered, setIsHovered] = useState(false) const [selectedColor, setSelectedColor] = useState(colors[0]) const [selectedSize, setSelectedSize] = useState(sizes[0]) const [isWishlisted, setIsWishlisted] = useState(false) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{name}

${price.toFixed(2)}

{colors.map((color) => (

{sizes.map((size) => ( ))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { Figtree } from "next/font/google" import "./globals.css" import type React from "react" // Import React const figtree = Figtree({ subsets: ["latin"] }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @layer utilities { .animate-tilt { animation: tilt 10s infinite linear; } } @keyframes tilt { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(0.5deg); } 75% { transform: rotate(-0.5deg); } } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { fontFamily: { sans: ["var(--font-inter)"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/PremiumProductCard.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import Image from "next/image" import { useState } from "react" import { motion } from "framer-motion" interface ProductCardProps { name: string basePrice: number image: string } interface ColorOption { name: string color: string priceAdjustment: number } export default function PremiumProductCard({ name, basePrice, image }: ProductCardProps) { const [isHovered, setIsHovered] = useState(false) const [selectedColor, setSelectedColor] = useState({ name: "Standard Glass", color: "#ffffff", priceAdjustment: 0, }) const [isAdded, setIsAdded] = useState(false) const colorOptions: ColorOption[] = [ { name: "Standard Glass", color: "#ffffff", priceAdjustment: 0 }, { name: "Nano-texture Glass", color: "#f0f0f0", priceAdjustment: 1000 }, ] const handleAddToBag = (e: React.MouseEvent) => { e.stopPropagation() console.log( `Added to bag: ${name} - ${selectedColor.name} - $${(basePrice + selectedColor.priceAdjustment).toFixed(2)}`, ) setIsAdded(true) setTimeout(() => setIsAdded(false), 2000) } const handleCardClick = () => { console.log(`Clicked on: ${name} - ${selectedColor.name}`) // You can add more functionality here, like opening a modal or navigating to a product page } return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onClick={handleCardClick} > {/* Content container */}

{/* Product image */} {name}

{/* Product info */}

{name}

${(basePrice + selectedColor.priceAdjustment).toFixed(2)}

{/* Color swatch */}

Select glass type:

{colorOptions.map((option) => ( { e.stopPropagation() setSelectedColor(option) }} whileHover={{ scale: 1.1, boxShadow: "0 0 10px rgba(255, 255, 255, 0.5)" }} whileTap={{ scale: 0.95 }} aria-label={`Select ${option.name}`} /> ))}

{selectedColor.name}

{/* Buy button */} Add to Bag

{isAdded && (

Added to Bag!

)} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import PremiumProductCard from "../components/PremiumProductCard" export default function Home() { return (

) } 84:["$","$L8e",null,{"chatId":"wYSa8boCwBG","children":["$","$L8f",null,{"data":{"@\"active-block\",\"wYSa8boCwBG\",":{"id":"b_8s0IHXrVOI3","messageId":"4O998BWqOFZakyTgyIkjoybpnNDisUbh","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"product-card","type":"code-project","project":"product-card"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"wYSa8boCwBG\",":false,"":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This